<template>
  <div>
    <el-dialog
      width="740px"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="tableClose"
      
      >
        <el-form
          :rules="formRules"
          label-position="right"
          :model="addInfo"
          label-width="120px"
          ref="formRef"
          inline
        >
          <!-- <el-form-item prop="enterNo" label="入库编号：" size="mini"> 
            <el-input v-model="addInfo.enterNo" ></el-input>
          </el-form-item> -->
          <el-form-item prop="supplierName" label="供应商名称：" size="mini">
            <el-select
                v-model="editdata.supplierName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item) in supplierNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="materialName" label="原辅料名称：" size="mini">
            <el-select
                v-model="editdata.materialName"
                placeholder="请选择"
                @change="changeSomething"
              >
                <el-option
                  v-for="(item) in MaterialNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="specification" label="规格：" size="mini">
            <el-input v-model="editdata.specification " :disabled="true"></el-input>
          </el-form-item>
          <el-form-item prop="price" label="价格：" size="mini">
            <el-input v-model="editdata.price" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item prop="count" label="数量：" size="mini">
            <el-input v-model="editdata.count"></el-input>
          </el-form-item>
          <el-form-item prop="registrant" label="操作人：" size="mini">
            <el-select
                v-model="editdata.registrant"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item) in staffInfoList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="enterTime" label="入库时间：" size="mini">
            <el-date-picker 
              :picker-options="pickerOptions" 
              v-model="editdata.enterTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss" 
              value-format="yyyy-MM-dd HH:mm:ss"
              >
            </el-date-picker>
          </el-form-item>
          
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeform()">取 消</el-button>
          <el-button type="primary" @click="editMaterInfo">{{message}}</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import {
  editMaterialInfo,
  getMaterialName,
  getsupplierInfoBypage
} from '../../../Api/processingplant/process_material_enter_info'

export default {
  name:'FromInfo',
  inject: ["reload"],
  props:{
    //是否打开表单
    dialogVisible:{
      Boolean,
      default:false
    },
    TypeList:{
      Array
    },
    pickerOptions:{
      Object
    },
    //表头
    dialogTitle:{
      String
    },
    //信息
    addInfo:{
      Object
    },
    message:{
      String
    }
  },
  watch:{
    dialogVisible(){
      this.editdata.count = this.addInfo.count;
      this.editdata.craftName = this.addInfo.craftName;
      this.editdata.enterTime = this.addInfo.enterTime;
      this.editdata.materialName = this.addInfo.materialName;
      this.editdata.price = this.addInfo.price;
      this.editdata.registrant = this.addInfo.registrant;
      this.editdata.specification = this.addInfo.specification;
      this.editdata.supplierName = this.addInfo.supplierName;
      this.editdata.id = this.addInfo.id;
    }
  },
  data(){
    return{
      editdata:{
        count:'',
        craftName:'',
        enterTime:'',
        materialName:'',
        price:'',
        registrant:'',
        specification:'',
        supplierName:'',
        id:0
      },
      formRules:{
        enterType:[
          {
            required: true,
            message: `请输入入库类型`,
            trigger: "blur"
          }
        ],
        registrant:[
          {
            required: true,
            message: `请输入登记人`,
            trigger: "blur"
          }
        ],
        supplierName:[
          {
            required: true,
            message: `请输入供应商`,
            trigger: "blur"
          }
        ],
      },
      MaterialNameList:[],//所有原辅料名称
      supplierNameList:[], //所有供应商名称
    }
  },
  computed:{
    ...mapState({
      staffInfoList: (state) => state.roleInfo.staffInfo,//企业员工信息
    })
  },
  created(){
    this.initDate()
    this.setMaterialNameList()
    this.setsupplierNameList()
  },
  methods:{
    ...mapActions("roleInfo",["getAllStaffInfo"]),
    initDate(){
      if(!this.staffInfoList){
        getAllStaffInfo();
      }
    },
    // 关闭弹窗
    tableClose() {
      this.$confirm('确认关闭？').then(() => {
          this.closeform();
        }).catch(() => {});
    },
    //选择原辅料名称后自动填充规格和价格
    changeSomething(item){
      this.editdata.materialName = item.name;
      this.editdata.price = item.price;
      this.editdata.specification = item.specification;
    },
    //选择入库类型
    changeEvent(index) {
      console.log(index);
      this.addInfo.enterType = this.TypeList[index].type;
    },
    //修改原辅料进货信息
    async editMaterInfo() {
      console.log(this.editdata);
      const { data: res } = await editMaterialInfo(this.editdata);
      console.log(res);
      if (res.statusCode == 20000) {
        // this.setAllList();
        this.$message.success("修改原辅料进货信息成功");
        this.dialogVisible = false;
      }else{
        if(res.data == null){
          return this.$message.warning("修改失败");
        }
        this.dialogVisible = false;
      }
      this.reload();
    },
    //查询所有原辅料名称
    async setMaterialNameList() {
      const { data: res } = await getMaterialName();
      this.MaterialNameList = res.data;
    },
    //查询所有供应商名称
    async setsupplierNameList() {
      const { data: res } = await getsupplierInfoBypage();
      this.supplierNameList = res.data;
    },
    // 关闭编辑表单弹窗
    closeform() {
      this.$emit("closeDialog");
    },
  },

}

</script>

<style scoped>
  
</style>